<template>
    <div>

<van-nav-bar title="消息" left-text="返回" left-arrow>
 <template #left>
    <van-icon name="arrow-left" size="18" color="black" @click="back()"/>
  </template>
</van-nav-bar>

<div class="notis">
    <div class="noti">
        <div class="noLeft"><van-icon name="fire-o" size="30" color="white" /></div>
        <div class="noRight">
            <h5>优惠活动</h5>
            <p>双十一全场5折起</p>
            <van-icon name="arrow" />
        </div>
    </div>
     <div class="noti">
        <div class="noLeft" style="backgroundColor: #ff7d58;"><van-icon name="volume-o" size="30" color="white" /></div>
        <div class="noRight">
            <h5>优惠活动</h5>
            <p>双十一全场5折起</p>
            <van-icon name="arrow" />
        </div>
    </div>
     <div class="noti">
        <div class="noLeft" style="backgroundColor: #6da0e6;"><van-icon name="contact" size="30" color="white" /></div>
        <div class="noRight">
            <h5>优惠活动</h5>
            <p>双十一全场5折起</p>
            <van-icon name="arrow" />
        </div>
    </div>
</div>
    </div>
</template>

<script>

import Vue from 'vue';
import { NavBar } from 'vant';
import { Icon } from 'vant';
Vue.use(Icon);
Vue.use(NavBar);
export default {
    methods: {
        back:function(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
.noti{
    height: 5.125rem;
    padding: 0.875rem 0 0  0.875rem;
    .noLeft{
        width: 3.375rem;
        height: 3.375rem;
        float: left;
        border-radius: 0.3125rem;
        padding-top: 10px;
        padding-left: 12px;
        &:nth-child(1){
            background-color: #f59120;
        }
        &:nth-child(2){
            background-color: #ff7d58;
        }
        &:nth-child(3){
            background-color:#6da0e6;
        }
    }
    .noRight{
        width: 18.625rem;
        height: 4.0625rem;
        border-bottom: 1px solid #d0d0d0;
        float: right;
        text-align: left;
        position: relative;
        h5{
            font-size: 1.125rem;
            margin: 0.525rem 0 0.8rem 0;
          
        }
        p{
            font-size: 0.875rem;
            color: #b2b2b0;
           

        }
        .van-icon{
            float: right;
            position: absolute;
            right: 1rem;
            top: 1rem;
        }
    }
}
</style>